<template>
  <section class="panel">

    <div class="tab-content">
      <template v-if="activeTab.key === 'capture'">
        <div class="capture-list">
          <article v-for="item in activeTab.list" :key="item.id" class="capture-card">
            <div class="capture-info">
              <div class="info-top">
                <div class="title-row">
                  <h3>{{ item.title }}</h3>
                  <button class="btn-action">{{ item.action }}</button>
                </div>
              </div>
              <div class="info-bottom">
                <div class="thumb">
                  <div class="thumb-mask">
                    
                  </div>
                </div>
                <div class="meta-section">
                  <div class="meta">
                    <span>{{ item.time }}</span>
                    <span>{{ item.region }}</span>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </template>
      <template v-else-if="activeTab.key === 'permit'">
        <div class="permit-list">
          <div v-for="item in activeTab.list" :key="item.id" class="permit-row">
            <strong>{{ item.unit }}</strong>
            <span>{{ item.type }}</span>
            <span>{{ item.duration }}</span>
            <span :class="['status', item.status]">{{ item.statusText }}</span>
          </div>
        </div>
      </template>
      <template v-else-if="activeTab.key === 'warning'">
        <div class="warning-charts">
          <BaseChart :option="activeTab.chartOption" :height="220" />
          <div class="warning-list">
            <div v-for="item in activeTab.list" :key="item.name" class="warning-item">
              <div>
                <h3>{{ item.name }}</h3>
                <p>{{ item.last }}</p>
              </div>
              <span :class="['tag', item.level]">{{ item.levelText }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="placeholder">
          <h3>功能预留</h3>
          <ul>
            <li>支持接入跨平台数据接口</li>
            <li>可配置3D模型设备点位联动</li>
            <li>预留AI模型推理算力面板</li>
          </ul>
        </div>
      </template>
    </div>
    <div class="tab-bar">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        :class="['tab-btn', { active: tab.key === activeKey }]"
        @click="activeKey = tab.key"
      >
        {{ tab.label }}
      </button>
    </div>
  </section>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import BaseChart from './BaseChart.vue'

const tabs = reactive([
  {
    key: 'capture',
    label: '抓拍隐患',
    list: [
      {
        id: 1,
        title: '员工未佩戴防护帽',
        desc: 'AI识别：C07车间西侧通道出现员工未佩戴防护帽行为。',
        region: 'C07车间',
        time: '2025-11-01 14:32:15',
        model: 'PPE检测模型V3',
        action: '查看录像'
      },
      {
        id: 2,
        title: '叉车闯入禁行区域',
        desc: '禁行网格场景触发入侵告警，设备定位：堆放场2号口。',
        region: '堆放场',
        time: '2025-11-01 13:21:07',
        model: '场地入侵模型V2',
        action: '下发通知'
      },
      {
        id: 3,
        title: '动火作业未及时复位',
        desc: '动火许可证未关闭状态超时，自动触发复查提醒。',
        region: 'B04车间',
        time: '2025-11-01 12:45:22',
        model: '许可联动策略',
        action: '推送复位'
      }
    ]
  },
  {
    key: 'permit',
    label: '工作许可',
    list: [
      { id: 1, unit: '维保一班', type: '动火作业', duration: '08:30-16:30', status: 'processing', statusText: '审批中' },
      { id: 2, unit: '装配二班', type: '高处作业', duration: '09:00-12:00', status: 'approved', statusText: '已审批' },
      { id: 3, unit: '外协团队', type: '受限空间', duration: '10:00-18:00', status: 'warning', statusText: '待复核' },
      { id: 4, unit: '动保科', type: '临时用电', duration: '14:00-22:00', status: 'pending', statusText: '待提交' }
    ]
  },
  {
    key: 'warning',
    label: '环境告警',
    chartOption: {
      tooltip: { trigger: 'axis' },
      legend: {
        data: ['门禁报警', '行车遥控板'],
        textStyle: { color: '#9ddcff' }
      },
      grid: { top: 36, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        {
          name: '门禁报警',
          type: 'line',
          smooth: true,
          data: [5, 3, 6, 4, 3, 2],
          lineStyle: { color: '#3ce6ff' }
        },
        {
          name: '行车遥控板',
          type: 'line',
          smooth: true,
          data: [2, 1, 2, 3, 2, 1],
          lineStyle: { color: '#ffc857' }
        }
      ]
    },
    list: [
      { name: '北门门禁报警', last: '最后一次：14:10:23', level: 'medium', levelText: '处置中' },
      { name: '行车遥控板离线', last: '最后一次：13:45:11', level: 'high', levelText: '需排查' },
      { name: '危险库区门禁', last: '最后一次：09:32:18', level: 'low', levelText: '已关闭' }
    ]
  },
  {
    key: 'reserve',
    label: '功能预留'
  }
])

const activeKey = ref(tabs[0].key)

const activeTab = computed(() => tabs.find(tab => tab.key === activeKey.value) ?? tabs[0])
</script>

<style scoped>
.panel {
  display: flex;
  height: 100%;
  padding: 18px 0 18px 10px;
  border: 1px solid rgba(19, 132, 205, 0.4);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(3, 31, 58, 0.85), rgba(1, 19, 32, 0.95));
  box-shadow: inset 0 0 36px rgba(0, 162, 255, 0.18);
}

.tab-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 6px;
}

.panel-header h2 {
  margin: 0;
  font-size: 20px;
  color: #e4f6ff;
}

.panel-header p {
  margin: 6px 0 14px;
  color: rgba(160, 218, 255, 0.65);
  font-size: 12px;
}

.tab-btn {
  width: 30px;
  height: auto;
  min-height: 60px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid rgba(31, 171, 255, 0.4);
  background: rgba(11, 48, 83, 0.6);
  color: rgba(160, 218, 255, 0.75);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-btn.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(45, 198, 255, 0.85), rgba(17, 95, 255, 0.85));
  box-shadow: 0 0 16px rgba(32, 173, 255, 0.45);
}

.tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.capture-list {
  display: grid;
  gap: 12px;
  overflow-y: auto;
}

.capture-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(32, 173, 255, 0.3);
  background: rgba(5, 53, 87, 0.65);
  color: #d4efff;
  margin-bottom: 16px;
}

/* 信息区域整体布局 */
.capture-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-top {
  border-bottom: 1px solid rgba(32, 173, 255, 0.2);
  padding-bottom: 8px;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-bottom {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.thumb {
  position: relative;
  width: 100px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(45, 198, 255, 0.2), rgba(17, 95, 255, 0.4));
  flex-shrink: 0;
}

.thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://dummyimage.com/300x200/0c2d4a/1aa7ff&text=AI+') center/cover no-repeat;
  opacity: 0.35;
}

.thumb-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  background: linear-gradient(0deg, rgba(5, 32, 55, 0.8), rgba(5, 32, 55, 0));
  font-size: 10px;
  color: rgba(215, 239, 255, 0.95);
  font-weight: 600;
}

.meta-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-top h3 {
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.3;
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: rgba(176, 222, 255, 0.7);
}

.btn-action {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(32, 173, 255, 0.5);
  background: rgba(12, 77, 120, 0.6);
  color: #7ceaff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s;
  flex-shrink: 0;
}

.btn-action:hover {
  background: rgba(32, 173, 255, 0.65);
  color: #fff;
}

.permit-list {
  display: grid;
  gap: 10px;
}

.permit-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(5, 53, 87, 0.65);
  border: 1px solid rgba(32, 173, 255, 0.3);
  color: #d4efff;
  font-size: 13px;
}

.status {
  justify-self: end;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.status.processing {
  background: rgba(0, 168, 255, 0.15);
  color: #5ad9ff;
}

.status.approved {
  background: rgba(49, 255, 161, 0.18);
  color: #8dffce;
}

.status.warning {
  background: rgba(255, 152, 67, 0.18);
  color: #ffcf87;
}

.status.pending {
  background: rgba(88, 122, 170, 0.2);
  color: #b6c9ff;
}

.warning-charts {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  flex: 1;
}

.warning-list {
  background: rgba(5, 53, 87, 0.65);
  border: 1px solid rgba(32, 173, 255, 0.3);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.warning-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d4efff;
  font-size: 13px;
}

.warning-item h3 {
  margin: 0;
  font-size: 14px;
}

.warning-item p {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(148, 206, 255, 0.7);
}

.tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.tag.high {
  background: rgba(255, 95, 109, 0.2);
  color: #ff8da1;
}

.tag.medium {
  background: rgba(255, 205, 99, 0.2);
  color: #ffd371;
}

.tag.low {
  background: rgba(88, 122, 170, 0.2);
  color: #9dc7ff;
}

.placeholder {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  color: #d4efff;
  background: rgba(5, 53, 87, 0.45);
  border-radius: 12px;
  border: 1px dashed rgba(64, 188, 255, 0.4);
}

.placeholder ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: rgba(166, 216, 255, 0.7);
}
</style>
